<template>
    <div class="wrapper">
        <div class="content">
            <input type="number" v-model="dbm" placeholder="请输入dBm值" class="input input-top"/>
            <div class="convert-btns">
                <text class="btn convert iconfont" @click="toW">&#xe62e;</text>
                <text class="btn reset iconfont" @click="reset">&#xe614;</text>
                <text class="btn convert iconfont" @click="toDbm">&#xe62d;</text>
            </div>
            <input type="number" v-model="w" placeholder="请输入瓦数" class="input input-bottom"/>
        </div>
    </div>
</template>

<script>
    //10*Math.log10(20*1000) = 43 =>dBm
    //Math.pow(10, 43/10)/1000 = 20 =>W
    export default {
        data() {
            return {
                dbm: '',
                w: ''
            }
        },
        created() {

        },
        methods: {
            toDbm() {
                if(this.w){
                    this.dbm = (10 * Math.log10(this.w * 1000)).toFixed(2);
                }
            },
            toW() {
                if(this.dbm) {
                    this.w = (Math.pow(10, this.dbm / 10) / 1000).toFixed(2);
                }
            },
            reset(){
                this.dbm = '';
                this.w = '';
            }
        }
    }
</script>

<style scoped>
    .iconfont{
        font-family: iconfont;
    }
    .content {
        margin: 20px;
    }
    .input{
        border-color: #4cae4c;
        border-style: solid;
        border-width: 2px;
        padding: 20px;
        font-size: 90px;
        color: #555555;
        background-color: #ffffff;
    }
    .input-top{
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
    }
    .input-bottom{
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
    }

    .convert-btns{
        flex-direction: row;
        justify-content: space-between;
        align-items: stretch;
    }
    .btn{
        padding-top: 40px;
        padding-bottom: 40px;
        margin-bottom: 0;
        font-size: 60px;
        font-weight: 400;
        text-align: center;
        width: 237px;
    }
    .convert{
        color: #fff;
        background-color: #5cb85c;
        border-color: #4cae4c;
    }
    .reset{
        color: #fff;
        background-color: #f0ad4e;
        border-color: #eea236;
    }
</style>
